<template>
  <u-loading-page :loading="isLoading" v-if="isLoading"></u-loading-page>
  <view class="report show-y-scroll-bar" v-else>
    <view class="report-hint" v-if="moreConfig&&moreConfig.pagePrompt">
      <view class="margin-bottom-sm" v-if="moreConfig&&moreConfig.pagePrompt&&moreConfig.pagePrompt.title">
        {{moreConfig.pagePrompt.title}}
      </view>
      <u-parse :content="moreConfig.pagePrompt.description"></u-parse>
    </view>
    <view class="report-filter" v-if="tags&&tags.length>0">
      <custom-filter :service="service" @on-filter="toFilter" :tags="tags" :cols="tableCols"
        :fieldInfo="v2Data._fieldInfo" srvApp="retail" v-if="tableCols&&tableCols.length>0"></custom-filter>
    </view>
    <view class="report-stats" v-if="statsData&&statsData.length>0">
      <view class="report-stats-item" v-for="item in statsData">
        <view class="label">
          <text> {{item.label||''}}</text>
          <text class="cuIcon-questionfill margin-left" v-if="item.tip" @click="showTip(item.tip)"></text>
        </view>
        <view class="value">
          <text class="unit" v-if="item.unit&&item.unit!=='￥'">{{item.unit||''}}</text>
          <text>{{setColumnText(item.value,item.unit,null,null,item)||'0'}}</text>
          <text class="suffix" v-if="item.suffix">{{item.suffix||''}}</text>
        </view>
      </view>
    </view>
    <view class="report-chart" v-if="showChartLayout&&showChartLayout.show===true">
      <!-- <view class="report-chart" v-if="serviceName==='srvretail_member_report_card_select'"> -->
      <view class="report-chart-title">
        <view class="flex-1 flex align-center">
          <text class="title"> 会员卡报表</text>
          <text>{{curLegend||''}}:{{curLegendAmount||'0'}}</text>
        </view>
        <view class="flex-1 flex justify-center align-center">
          图表维度：
          <view style="width: 200px;">
            <uni-data-select v-model="curLegend" :localdata="legendRange" @change="changeLegend"></uni-data-select>
          </view>
        </view>
        <text class="flex-1"></text>
      </view>
      <view class="report-chart-view" style="">
        <l-echart ref="chart"></l-echart>
      </view>
    </view>
    <view class="report-table ">
      <view class="">
        <view class="section-box"
          v-if="['srvretail_member_report_month_select','srvretail_member_report_date_select'].includes(serviceName)">
          <u-subsection activeColor="#38C09E" :list="reportTypeList" :current="curType" @change="changeReportType">
          </u-subsection>
        </view>
        <view class="report-table-title" v-if="moreConfig&&moreConfig.table_explain&&moreConfig.table_explain.desc">
          列表字段说明 <text class="cuIcon-questionfill margin-left" @click="showModal('explainPopup')"></text>
        </view>
      </view>

      <uni-table border emptyText="暂无更多数据" class="report-table-content  ">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th class="summary-title td  th" v-if="showTableSummary&&showTableSummary.title"></uni-th>
          <uni-th class="td th" align="center" v-for="col in tableCols" :sortable="col.sortable"
            @sort-change="sortChange($event,col.columns)">
            <view class="" v-if="!col.section_title">
              <view class="custom th">
                {{col.label||''}}
              </view>
            </view>
            <view class="custom-section-view" v-else-if="col.cols&&col.cols.length>0">
              <view class="section_title">
                {{col.section_title}}
              </view>
              <view class="custom-section-title">
                <view class="custom th" v-for="innerCol in col.cols">
                  {{innerCol.label||''}}
                </view>
              </view>
            </view>
          </uni-th>
          <uni-th class="td th handler" v-if="detailBtn&&detailBtn.button_name">
            操作
          </uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in tableData">
          <uni-td class="summary-title" v-if="showTableSummary&&showTableSummary.title"> </uni-td>
          <uni-td class="td" width="25rem" v-for="col in tableCols">
            <view class="normal" v-if="!col.section_title">
              <text class="text-green" v-if="isOrder(item,col)"
                @click="toOrderDetail(item[col.columns],item.operation_type)">
                {{item[col.columns]||'--'}}</text>
              <text v-else> {{setColumnText(item[col.columns],null,item,col.columns,col)}}</text>
            </view>
            <view class="custom-section-title" v-else-if="col.cols&&col.cols.length>0">
              <view class="custom td" width="250" v-for="innerCol in col.cols">
                <view class="normal" v-if="item[innerCol.columns]===0">
                  0
                </view>
                <view class="normal" v-else>
                  <text class="text-green" v-if="innerCol.columns==='order_no'"
                    @click="toOrderDetail(item[innerCol.columns])">
                    {{setColumnText(item[innerCol.columns])}}</text>
                  <text v-else> {{setColumnText(item[innerCol.columns],null,item,col.columns,col)}}</text>
                </view>
              </view>
            </view>
          </uni-td>
          <uni-td class="td text-green handler"
            v-if="moreConfig&&moreConfig.isShowRowButtons === true&&v2Data&&v2Data.rowButton">
            <text @click.stop="toDetail(btn,item)" v-for="btn in v2Data.rowButton"
              v-show="isShowBtn(btn,item)">{{btn.button_name}}</text>
          </uni-td>
          <!-- <uni-td class="td text-green handler" v-if="detailBtn&&detailBtn.button_name">
            <text @click.stop="toDetail(detailBtn,item)">{{detailBtn.button_name}}</text>
          </uni-td> -->
        </uni-tr>
        <uni-tr class="summary" v-if="showTableSummary">
          <uni-td class="summary-title"> {{showTableSummary.title}}</uni-td>
          <uni-td class=" custom td" width="250" v-for="col in tableCols">
            <view class="normal">
              <text v-if="summaryData[col.columns]===0">0</text>
              <text v-else>{{setColumnText(summaryData[col.columns])}}</text>
            </view>
          </uni-td>
          <uni-td class="summary-title" v-if="detailBtn&&detailBtn.button_name"> </uni-td>
        </uni-tr>
      </uni-table>
      <view class="report-table-footer">
        <uni-pagination showPageSize="false" @pageSizeChange="pageSizeChange" show-icon="true" :total="total"
          :pageSize="rownumber" :current="pageNo" @change="changePage">
        </uni-pagination>
      </view>
    </view>
    <view class="custom-center-popup">
      <u-popup :show="modalName==='statTip'" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="true" @close="close" v-if="curTip">
        <view class="table-explain text-white">
          <u-parse :content="curTip"></u-parse>
        </view>
      </u-popup>
      <u-popup :show="modalName==='explainPopup'" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="true" @close="close"
        v-if="moreConfig&&moreConfig.table_explain&&moreConfig.table_explain.desc">
        <view class="table-explain">
          <u-parse :content="moreConfig.table_explain.desc"></u-parse>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
  // 按需引入
  import * as echarts from 'echarts/core';
  import {
    LineChart,
    BarChart
  } from 'echarts/charts';
  import {
    TooltipComponent,
    GridComponent,
    LegendComponent
  } from 'echarts/components';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  // 注册必须的组件
  echarts.use([
    GridComponent,
    LegendComponent,
    TooltipComponent,
    LineChart,
    BarChart,
    CanvasRenderer
  ]);

  export default {
    name: "report-table",
    props: {
      serviceName: {
        type: String,
        default: ''
      },
      condition:{
        type: Array
      },
      isShow: {
        type: Boolean,
      },
      initCond: {
        type: Array
      }
    },
    data() {
      return {
        curTip: "",
        service: "",
        reportTypeList: ['日报表', '月报表'],
        curType: 0,
        pageNo: 1,
        total: 0,
        rownumber: 20,
        tableData: [],
        v2Data: null,
        statsData: [],
        modalName: "",
        filterVal: "",
        relationCondition: {},
        isLoading: true,
        reportLegend: [],
        curLegend: '',
        order: null
      };
    },
    watch: {
      tableData: {
        handler(newVal) {
          if (Array.isArray(newVal)) {
            this.setChartOption()
          }
        }
      },
      isShow: {
        immediate: true,
        handler(newVal) {
          if (newVal) {
            if (this?.showChartLayout?.show == true) {
              // 把 echarts 传入 
              this.setChartOption()
            }
          }
        }
      },
    },
    computed: {
      sortableCol() {
        return this.moreConfig?.sortable || []
      },
      legendRange() {
        return this.reportLegend.map(item => {
          return {
            text: item,
            value: item
          }
        })
      },
      curLegendAmount() {
        if (this.curLegend) {
          let column = this.tableCols.find(item => item.label === this.curLegend)
          if (column?.columns) {
            return this.tableData.reduce((pre, cur) => {
              return pre + cur[column.columns]
            }, 0)
          }
        }

      },
      summaryData() {
        let columns = this.showTableSummary?.columns;
        let res = {}
        if (Array.isArray(columns) && columns.length > 0) {
          columns.forEach(col => {
            if (col.type === 'sum') {
              res[col.column] = this.tableData.reduce((res, cur) => {
                res += cur[col.column] || 0
                return Number(Number(res).toFixed(2))
              }, 0)
            }
          })
        }
        return res
      },
      showTableSummary() {
        return this.v2Data?.moreConfig?.showTableSummary
      },
      filterTags() {
        return this.v2Data?.moreConfig?.filterTags ?? this.v2Data?.moreConfig?.list_config?.filterTags ?? ''
      },
      tags() {
        let self = this
        let tabs = this.v2Data?.tabs
        if (Array.isArray(tabs) && tabs.length === 0 && Array.isArray(this.v2Data?.moreConfig?.tags_cfg) && this.v2Data
          ?.moreConfig?.tags_cfg.length > 0) {
          tabs = this.v2Data?.moreConfig?.tags_cfg
        }
        if (Array.isArray(tabs) && tabs.length > 0) {
          tabs = tabs.sort((a, b) => a.orders - b.orders)
          let tab = {}
          let tabsData = []
          tabs.forEach((t) => {
            tab = {
              service: null,
              table_name: null,
              orders: null,
              conditions: null,
              seq: null,
              parent: null,
              label: null,
              list_tab_no: null,
              more_config: null,
              inputType: null,
              colName: ""
            }
            let mc = {}
            if (t.more_config) {
              try {
                mc = JSON.parse(t.more_config)
                tab.more_config = mc
                tab.colName = mc.colName
              } catch (e) {
                //TODO handle the exception
              }
            } else {
              mc = {
                ...t
              }
              tab.more_config = mc
            }
            tab.service = t.service
            tab.table_name = t.table_name
            tab.conditions = t.conditions
            tab.orders = t.orders
            tab.default = mc.default
            tab.seq = t.seq
            tab.label = t.label
            tab.list_tab_no = t.list_tab_no
            tab._data = t
            tab._type = mc.type || null
            tab._colName = mc.colName || null
            tab.inputType = mc.inputType || null
            tab.showAllTag = mc.showAllTag || false
            tab.default = mc.default || ''
            tab.placeholder = mc.placeholder || '请输入...'
            if (tab._colName) {
              tab._colName = tab._colName.split(',')
              let cols = tab._colName
              let srvCols = self.v2Data.srv_cols
              tab['_colSrvData'] = []
              for (let c = 0; c < cols.length; c++) {
                for (let cs = 0; cs < srvCols.length; cs++) {
                  if (cols[c] === srvCols[cs].columns) {
                    tab._colSrvData.push(srvCols[cs])
                  }
                }
              }
            }
            tabsData.push(tab)
          })
          return tabsData
        }
        // return this.v2Data?.tabs
      },
      showChartLayout() {
        return this.v2Data?.moreConfig?.showChartLayout
      },
      moreConfig() {
        return this.v2Data?.moreConfig
      },
      detailBtn() {
        if (this.moreConfig?.isShowRowButtons === true && this.v2Data?.rowButton && this.v2Data?.rowButton.length > 0) {
          return this.v2Data?.rowButton.find(item => item.button_type === 'detail' || item.button_name ===
            "详情")
        }
      },
      tableCols() {
        let columns = this.v2Data?.srv_cols;
        let sortable = this.v2Data?.moreConfig?.sortable || []
        if (Array.isArray(columns) && columns.length > 0) {
          let cols = columns.map(item => {
            if (Array.isArray(sortable) && sortable.includes(item.columns)) {
              item.sortable = true
            }
            return item
          }).filter(item => {
            return item.in_list === 1
          })
          let result = []

          cols.forEach(col => {
            if (col.section_title) {
              let index = result.findIndex(item => item.section_title === col.section_title);
              if (index !== -1) {
                result[index].cols.push(col)
              } else {
                result.push({
                  section_title: col.section_title,
                  cols: [col]
                })
              }
            } else {
              result.push(col)
            }
          })

          return result
        }
      },
    },
    methods: {
      isShowBtn(btn, data) {
        if (this.moreConfig?.isShowRowButtons === true) {
          if (!btn.permission) {
            return false
          }
          if (btn.disp_exps) {
            return eval(btn.disp_exps)
          }
          return true
        } else {
          return false
        }

      },
      pageSizeChange(e) {
        console.log(e);
        this.rownumber = e;
        this.pageNo = 1;
        this.getList()
      },
      sortChange(e, col) {
        console.log(e, col);
        let order = [{
          "colName": col,
          "orderType": e.order === 'descending' ? 'desc' : "asc" // asc升序  desc降序
        }]
        if (!e.order) {
          order = null
        }
        this.order = order
        this.pageNo = 1;
        this.getList()
      },
      isOrder(e, col) {
        if (['订单退货退款', '订单支付', '直接退款'].includes(e?.operation_type) && col.columns === 'bill_no' || col?.columns ===
          'order_no') {
          return true
        }
        if (['初始入库单', '入库单', '出库单', '盘点单', '报损单'].includes(e?.operation_type) && col.columns === 'bill_no' || col
          ?.columns ===
          'order_no') {
          return true
        }
      },
      toOrderDetail(no, type) {
        if (['报损单'].includes(type)) {
          let fieldsCond = [{
            column: 'loss_no',
            value: no
          }]
          let url =
            `/pages/public/form/form?type=detail&serviceName=srvretail_loss_reporting_select&fieldsCond=${JSON.stringify(fieldsCond)}`
          uni.navigateTo({
            url
          })
          return
        }
        if (['盘点单'].includes(type)) {
          let fieldsCond = [{
            column: 'inventory_no',
            value: no
          }]
          let url =
            `/pages/public/form/form?type=detail&serviceName=srvretail_inventory_detail_info_select&fieldsCond=${JSON.stringify(fieldsCond)}`
          uni.navigateTo({
            url
          })
          return
        }
        if (['出库单'].includes(type)) {
          let fieldsCond = [{
            column: 'issue_no',
            value: no
          }]
          let url =
            `/pages/public/form/form?type=detail&serviceName=srvretail_issue_select&fieldsCond=${JSON.stringify(fieldsCond)}`
          uni.navigateTo({
            url
          })
          return
        }
        if (['初始入库单', '入库单', '出库单'].includes(type)) {
          let fieldsCond = [{
            column: 'warehousing_no',
            value: no
          }]
          let url =
            `/pages/public/form/form?type=detail&serviceName=srvretail_warehousing_select&fieldsCond=${JSON.stringify(fieldsCond)}`
          uni.navigateTo({
            url
          })
          return
        }
        if (no && !isNaN(Number(no))) {
          const url =
            `/pages/main/orderList/orderList?srv=srvretail_store_order_select&pageType=listAndDetail&=&listLayout=listAndDetail&title=销售管理&order_no=${no}`
          uni.navigateTo({
            url
          })
        }

      },
      changeLegend(e) {
        console.log(e);
        this.curLegend = e
        this.$nextTick(() => {
          this.setChartOption()
        })
      },
      setChartOption() {
        if (this?.showChartLayout?.show == true) {
          let option = {
            color: ['#38C09E'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: []
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top:'8%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              data: []
            },
            yAxis: {
              minInterval: 1,
              type: 'value',

            },
            series: []
          }

          let tableCols = this.tableCols;
          let tableData = this.deepClone(this.tableData);
          tableData = tableData.reverse()
          if (Array.isArray(tableCols) && tableCols.length > 1) {
            let xCol = tableCols[0].columns
            if (this.showChartLayout?.xColumn) {
              xCol = this.showChartLayout?.xColumn
            }
            let otherCols = tableCols.filter(item => ['Integer', 'int', 'Money', 'Float'].includes(item.col_type) &&
              item.columns !== xCol).map(item => {
              return {
                column: item.columns,
                label: item.label
              }
            })

            option.legend.data = otherCols.map(item => item.label)
            if (this.showChartLayout?.groupLegend === true) {
              this.reportLegend = this.deepClone(option.legend.data)
              if (!this.curLegend && this.reportLegend.length > 0) {
                this.curLegend = this.reportLegend[0]
              }
              option.legend.show = false
              // option.grid.top = '8%'
              otherCols = tableCols.filter(item => item.label === this.curLegend).map(item => {
                return {
                  column: item.columns,
                  label: item.label
                }
              })
              option.legend.data = [this.curLegend]
            }
            option.xAxis.data = tableData.map(item => item[xCol])
            option.series = option.legend.data.map((legend, index) => {
              return {
                name: legend,
                type: 'bar',
                left: '10%',
                barMaxWidth: 100,
                data: [...option.xAxis.data.map((e, i) => {
                  return tableData[i][otherCols[index].column]
                })],
                label: {
                  position: 'top',
                  show: true,
                  formatter: function(params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return '';
                    }
                  },
                  textStyle: {
                    color: '#38C09E'
                  }
                }
              }
            })

            setTimeout(() => {
              this.$refs.chart.init(echarts, chart => {
                chart.setOption(option);
              });
            }, 50)
          }
        }
      },
      changeReportType(e) {
        this.curType = e
        if (e === 1) {
          this.service = 'srvretail_member_report_month_select'
        } else {
          this.service = 'srvretail_member_report_date_select'
        }
        this.getV2()
        this.pageNo = 1
        this.getList()
      },
      toDetail(btn, row) {
        console.log(btn, row);
        let url = `/pages/public/form/form?type=detail&serviceName=${btn.service_name}&id=${row.id}&disabled=true`
        if (this.service === 'srvretail_handover_count_select') {
          let cond = [{
              "colName": "sales_clerk",
              "value": row.staff_no,
              "ruleType": "eq"
            }, {
              "colName": "create_time",
              "value": row.start_time,
              "ruleType": "ge"
            }, {
              "colName": "create_time",
              "value": row.handover_date,
              "ruleType": "le"
            },
            {
              "colName": "order_channel",
              "value": row.channel_source,
              "ruleType": "eq"
            },
          ]
          url =
            `/pages/main/report/vip?serviceName=srvretail_handover_details_info_select&isBack=true&title=交接班详情&cond=${JSON.stringify(cond)}&disabled=true`
        }
        uni.navigateTo({
          url
        })
      },
      toFilter(e) {
        this.pageNo = 1
        this.relationCondition = e || {}
        this.getList()
      },
      getListWithFilter(e) {
        let self = this
        let filter_tags_cfg = this.v2Data?.moreConfig?.filter_tags_cfg
        if (typeof filter_tags_cfg === 'object') {
          filter_tags_cfg = this.deepClone(filter_tags_cfg)
        }
        let tabsConds = this.$refs.filterTabs.buildConditions(true, filter_tags_cfg)

        this.relationCondition = tabsConds?.relation_condition
        this.filterVal = tabsConds?.value
        setTimeout(() => {
          this.pageNo = 1;
        }, 100)
      },
      changePage(e) {
        const {
          type,
          current
        } = e
        this.pageNo = current
        this.getList()
      },
      close() {
        this.modalName = ''
        this.curTip = ''
      },
      showModal(e) {
        this.modalName = e
      },
      showTableExplain() {
        this.modalName = 'explainPopup'
      },
      showTip(tip) {
        this.modalName = 'statTip'
        this.curTip = tip
        // uni.showModal({
        //   title: '提示',
        //   content: tip,
        //   showCancel: false
        // })
      },
      async getV2() {
        this.isLoading = true
        setTimeout(() => {
          this.isLoading = false
        }, 5000)
        const v2Data = await this.getServiceV2(this.service, 'select', 'list', 'retail')
        this.v2Data = v2Data
      },
      async getList() {
        const url = `/retail/select/${this.service}`
        const req = {
          "serviceName": this.service,
          "colNames": ["*"],
          "relation_condition": this.relationCondition,
          "page": {
            "pageNo": this.pageNo,
            "rownumber": this.rownumber
          },
        }
        if (Array.isArray(this.initCond) && this.initCond.length > 0) {
          req.condition = [...this.initCond]
        }
        if (Array.isArray(this.order) && this.order.length > 0) {
          req.order = this.order
        }
        uni.showLoading({
          title: '加载中...'
        })
        setTimeout(() => {
          uni.hideLoading()
        })
        const res = await this.$http.post(url, req)
        this.isLoading = false
        if (res?.data?.state === 'SUCCESS') {
          this.tableData = res.data.data
        } else {
          this.total = 0
          this.pageNo = 1
        }
        if (res?.data?.page?.total) {
          this.total = res?.data?.page?.total
        }
        if (res?.data?.page?.pageNo) {
          this.pageNo = res.data.page.pageNo
        }
        if (this.pageNo === 1 && this.tableData.length === 0) {
          this.total = 0
          this.pageNo = 1
        }
        if (res?.data?.stats_data) {
          this.statsData = res.data.stats_data
        }
      },
      initData() {
        if (this.service) {
          this.pageNo = 1
          this.getV2().then(_ => {
            this.getList()
          })

        }
      },
    },
    mounted() {
      if (this.serviceName) {
        this.service = this.serviceName
        this.initData()
      }

    }
  }
</script>

<style lang="scss">
  .report {
    padding: 1rem;
    width: 100vw;
    height: 100vh;
    // height: calc(100vh - var(--winodw-top) - var(--winodw-bottom));
    // overflow: hidden;
    font-size: $retail-font-size-sm;
    // display: flex;
    // flex-direction: column;

    &-hint {
      background-color: $retail-color-primary-light;
      color: $retail-color-primary;
      padding: 1rem 2rem;
      border-radius: 1rem 1rem 0 0;
    }

    &-filter {
      padding: 1rem 2rem;
      border-radius: 0 0 1rem 1rem;
      background-color: #fff;
      // margin: 2rem 0;
    }

    &-chart {
      margin: 2rem 0;
      background-color: #fff;

      &-view {
        width: calc(100% - 4rem);
        height: 40vh;
        margin: 0 auto;
        padding-bottom: 2rem;
      }

      &-title {
        padding: 2rem 3rem;
        position: relative;
        display: flex;
        justify-content: space-between;

        .title {
          font-weight: 700;
          margin-right: 2rem;
        }

        &::after {
          content: '';
          position: absolute;
          left: 2rem;
          width: .5rem;
          height: 3rem;
          top: calc(50% - 1.5rem);
          border-radius: 1rem;
          background-color: $retail-color-primary;
        }
      }
    }

    &-stats {
      margin: 2rem 0;
      display: flex;
      justify-content: space-between;
      /* #ifdef APP-PLUS */
      min-height: 12vh;

      /* #endif */
      &-item {
        margin-right: 2rem;
        flex: 1;
        background-color: #fff;
        border-radius: 1rem;
        padding: 2rem 3rem;
        text-align: center;
        min-height: 11rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:last-child {
          margin-right: 0;
        }

        .label {
          font-size: 3rem;
          position: relative;
          color: $retail-color-primary;
        }

        .value {
          padding-top: 1rem;
          position: relative;

          .unit {
            // position: absolute;
            // left: -3rem;
          }
        }
      }
    }

    &-table {
      background-color: #fff;
      padding: 2rem;
      border-radius: 1rem;
      // flex: 1;
      display: flex;
      flex-direction: column;

      // overflow-y: scroll;
      // overflow: hidden;
      &-title {
        padding-bottom: 1rem;
      }

      &-content {
        // flex: 1;
      }

      .section-box {
        max-width: 30rem;
        padding-bottom: 1rem;

        ::v-deep .u-subsection--button {
          height: 6rem;
        }

        ::v-deep .u-subsection__item__text {
          font-size: 2.4rem !important;
        }
      }

      .uni-table-th {
        padding: 0;

        .custom.th {
          padding: 2rem 0;

          &:last-child {
            border-right: 0;

          }
        }

      }

      .uni-table-td,
      .uni-table-th {
        padding: 0;
      }

      .summary {
        color: $retail-color-primary;

        .td {
          color: $retail-color-primary;
        }
      }

      .summary-title {
        min-width: 10rem;
        padding: 1rem;
      }

      .custom-section-view {
        width: 100%;

        .section_title {
          padding: 2rem;
        }
      }


      .custom-section-title {
        display: flex;
        align-items: center;

        .custom.th {
          border-right: 1px #ebeef5 solid;
          border-top: 1px #ebeef5 solid;
          padding: 2rem;

          &:last-child {
            border-right: 0;

          }
        }


      }

      .custom-section-title {
        min-width: 18rem;

        .custom.th {
          min-width: 22rem;
        }
      }

      .td {
        min-width: 18rem;

        &.summary-title {
          min-width: 10rem;
        }

        &.handler {
          padding: 2rem;
          min-width: 10rem;
          color: $retail-color-primary;

          &.th {
            color: #333;
          }
        }

        &.custom {
          flex: 1;
          // border-right: 1px #EBEEF5 solid;
          min-width: 22rem;
        }

        .normal {
          padding: 2rem;
          border-right: 1px #EBEEF5 solid;
          cursor: pointer;
        }

        &.th {
          background-color: $retail-color-dark;
        }

        .custom.th {
          flex: 1;
        }
      }

      .report-table-footer {
        // flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 2rem;
      }
    }
  }

  .custom-center-popup {
    ::v-deep .u-popup__content {
      background-color: transparent !important;
    }

    .table-explain {
      padding: 6rem;
      max-height: 90vh;
      overflow-y: scroll;
      width: 50vw;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 2rem;
    }
  }
</style>
